<template>
	<div class="download-box" :style="'height:'+viewHeight+'px;'">
		<div class="download-cot">
			<div class="download-cot_p">
				<img class="download-cot_sp1" :src="$ala.urlImage(cofigList.logo)" />
				<p class="download-cot_sp2">{{cofigList.webSiteName}}</p>
			</div>
			<p class="download-cot_p2">{{cofigList.description}}</p>
			<div class="download-cot_p3">
				<div class="download-cot_buts">
					<div class="download-cot_bt1" @click="downloadTab('ios')">苹果下载</div>
					<div class="download-cot_bt1" @click="downloadTab('android')">安卓下载</div>
				</div>
				<div class="download-cot_qrocd">
					<div id="qrcode"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import QRCode from 'qrcodejs2'
	import ala from '@/service/ala.js'
	export default {
		data() {
			return {
				cofigList: {},
				versionArry: {},
				viewHeight: 0
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.viewHeight = window.innerHeight
				this.cofigList = await this.$ala.httpGet('api/AutoConfig/Get', {
					type: 'WebSiteConfig'
				})
				this.versionArry = await this.$ala.httpGet('api/AutoConfig/Get', {
					type: 'AppUpdateConfig'
				})
				var qrocedUrl = this.cofigList.apiImagesUrl + '/#/pages/common/down'
				var repones = new QRCode('qrcode', {
					width: 130,
					height: 130,
					text: qrocedUrl // 二维码地址
				})
			},
			downloadTab(terminal) {
				var verios = ''
				if (terminal === 'android') {
					verios = ala.host + this.versionArry.androidUrl
					window.open(verios)
				} else {
					window.open(this.versionArry.iosUrl)
				}
			}
		}
	}
</script>
<style lang="scss">
	.download-box {
		width: 100%;
		height: 100%;
		background: url('https://diyapi.5ug.com/wwwroot/uploads/api/935-660-657/2022-11-10/636c58292f0c5264615dc251.png');
		background-size: 100% 100%;

		.download-cot {
			width: 1002PX;
			margin: auto;

			.download-cot_p {
				height: 150px;
				display: flex;
				align-items: flex-end;
			}

			.download-cot_sp1 {
				width: 75px;
				height: 75px;
			}

			.download-cot_sp2 {
				color: #fff;
				font-size: 30px;
				line-height: 30px;
				margin-left: 10px;
			}

			.download-cot_p2 {
				width: 1002PX;
				margin: 40px 0 65px;
				font-size: 20px;
				line-height: 1.5;
				color: #fff;
				display: flex;
				flex-direction: row;
			}

			.download-cot_p3 {
				display: flex;
				align-items: center;

				.download-cot_buts {
					.download-cot_bt1 {
						width: 180px;
						height: 58px;
						cursor: pointer;
						border: 1px solid #fff;
						border-radius: 58px;
						line-height: 58px;
						text-align: center;
						font-size: 20px;
						color: #fff;

						&+.download-cot_bt1 {
							margin-top: 20px;
						}

						&:hover {
							opacity: 0.8;
						}
					}
				}

				.download-cot_qrocd {
					margin-left: 80px;
					width: 150px;
					height: 150px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					background-color: #FFFFFF;
				}
			}
		}
	}
</style>